body {    
   padding-top : 50px          ;
   padding-left: 50px          ;
   font-family : 'Montserrat',
                  Verdana    ,
                  sans-serif   ; 
   color       : grey          ;
}

hr {
   border: 1px dotted #55c00c ;
}         
         
dt {
   text-align: center  ;
   color     : #55c00c ;
}

span {
   font-size: 0.75em ;
   color    : grey   ;
}
   
.dropbtn {
   background-color: #55c00c ;
   color           : white   ;
   padding         : 16px    ;
   font-size       : 16px    ;
   /* border: none; */
   width           : 125px   ;
            
   border               : 1px solid #e6e6e6 ;
   border-radius        : 10px              ;
   -webkit-border-radius: 10px              ;
   -moz-border-radius   : 10px              ;
}

.dropbtn_inactive {
   background-color: silver ;
   color           : grey   ;
   padding         : 16px   ;
   font-size       : 16px   ;
   /* border: none; */
   width           : 125px  ;
            
   border               : 1px solid #e6e6e6 ;
   border-radius        : 10px              ;
   -webkit-border-radius: 10px              ;
   -moz-border-radius   : 10px              ;
}

.dropdown {
   position : relative     ;
   display  : inline-block ;
   font-size: 12px         ;
}

.dropdown-content {
   display         : none                             ;
   position        : absolute                         ;
   background-color: #f1f1f1                          ;
   min-width       : 250px                            ;
   box-shadow      : 0px 8px 16px 0px rgba(0,0,0,0.2) ;
   z-index         : 1                                ;

   border                : 1px solid #55c00c ;
   border-radius         : 10px              ;
   -webkit-border-radius : 10px              ;
   -moz-border-radius    : 10px              ;
}

.dropdown-content a {
   color          : black     ;
   padding        : 12px 16px ;
   text-decoration: none      ;
   display        : block     ;
}

.dropdown-content a:hover {
   background-color: #ddd ;
}

.dropdown:hover .dropdown-content {
   display: block ;
}

.dropdown:hover .dropbtn {
   background-color: #3e8e41 ;
}

.separator {
   display    : flex    ;
   align-items: center  ;
   text-align : center  ;
   color      : #55c00c ;
}

.separator_inactive {
   display    : flex   ;
   align-items: center ;
   text-align : center ;
   color      : grey   ;
}

/* https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line */

.separator::before, .separator::after {
   content      : ''                 ;
   flex         : 1                  ;
   border-bottom: 1px dotted #55c00c ;
   margin-left  : 1.5em              ;
   margin-right : 1.5em              ;
}

.separator:not(:empty)::before {
   margin-right: 1em ;
}

.separator:not(:empty)::after {
   margin-left: 1em ;
}